<template>
  <div>
    <h1 style="margin: 1%">供应商跟进</h1>
    <div class="trailAdd">
      <hr />

      <div class="MenuDiv">
        <el-row class="Menu clear">
          <el-button class="iconfont icon-add-s Newtrail" @click="toAppend"
            >新增</el-button
          >
          <el-button
            style="color: #444444; background-color: #f4f4f4"
            icon="el-icon-search"
            class="btnright"
          ></el-button>
          <el-input placeholder="查找....."></el-input>
        </el-row>
      </div>
      <el-table
        style="width: 100%"
        :header-cell-style="{ 'background-color': '#f7f7f7' }"
      >
        <el-table-column prop="name" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="address" label="标题" width="300">
        </el-table-column>
        <el-table-column prop="address" label="客户" width="300">
        </el-table-column>
        <el-table-column prop="address" label="联系人"> </el-table-column>
        <el-table-column prop="address" label="手机"> </el-table-column>
        <el-table-column prop="address" label="负责人"> </el-table-column>
        <el-table-column prop="address" label="跟进日期"> </el-table-column>
        <el-table-column prop="address" label="下次跟进"> </el-table-column>
        <el-table-column prop="address" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="address" label="状态" width="180">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="220">
        </el-table-column>
      </el-table>
      <div class="pageStyle">
        <ul class="ulLeft">
          <li>共条|</li>
          <li>每页条|</li>
          <li>共页</li>
        </ul>
        <ul class="ulRight">
          <el-button
            class="iconfont icon-zhishouye"
            @click="homePage"
            title="至首页"
          ></el-button>
          <el-button
            class="iconfont icon-triangle-left"
            @click="lastPage"
            title="至尾页"
          ></el-button>
          <div class="pages"><el-button>1</el-button></div>
          <el-button
            class="iconfont icon-triangle-right"
            @click="prevPage"
            title="上一页"
          ></el-button>
          <el-button
            class="iconfont icon-zhiweiye"
            @click="nextPage"
            title="下一页"
          ></el-button>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    //至首页
    homePage() {},
    //至尾页
    lastPage() {},
    //上一页
    prevPage() {},
    //下一页
    nextPage() {},
    //点击新增跳转
    toAppend() {
      this.$router.push("/addtrails");
    },
  },
};
</script>

<style scoped lang="less">
body {
  width: 100%;
  height: 100%;
}
//最大的div
.trailAdd {
  width: 98%;
  border: 1px solid red;
  margin: 0 auto;
  //分割线
  hr {
    width: 100%;
    border: 1px solid #6c7b8b;
    background-color: #6c7b8b;
  }
  //头部功能键
  .MenuDiv {
    width: 100%;
    height: 50px;
    border: 1px solid red;
    margin-bottom: 1px;
    //input和button搜索
    .Menu {
      .btnright {
        float: right;
        padding: 12px;
        margin: 4px 0px;
        margin-right: 20px;
      }
      .el-input {
        width: 200px;
        float: right;
        margin: 4px 0px;
      }
    }
    //新增按钮
    .Newtrail {
      background-color: #00a65a;
      color: #fff;
      float: left;
      padding: 8px;
      cursor: pointer;
      margin: 8px 0px 0px 20px;
      z-index: 1000;
    }
  }
}

//页码div
.pageStyle {
  padding: 0 10px;
  height: 50px;
  background-color: #fafafa;
  .pages {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 50px;
    padding: 0px 10px;
  }
  .ulLeft {
    float: left;
    li {
      line-height: 50px;
      float: left;
      list-style: none;
    }
  }
  .ulRight {
    float: right;
    line-height: 50px;
    text-align: center;
    .el-button {
      font-size: 12px;
      padding: 5px;
    }
  }
}
</style>